<template>
  <div>
		<div class="head">
			<AppHeader style="z-index:10"></AppHeader>
			<van-image
				:src="require('@/assets/img/explore-2.webp')"
					style="width: 100%; height: 300px"
				/>
				<h1 >风景&路线</h1>
			</div>	
    <div class="travelPlan">
      <h3>打造您独一无二的行程</h3>
      <p>创建一个完全定制的每日行程，并加以探索可可西里自然保护区。选择您的目的地、旅行日期和想要探索的当地景点。规划旅游行程就是这么简单！</p>
    </div>
    <!-- 热门景点 -->
    <div class="destination">
      <h1>热门目的地</h1>
      <van-button
      @click="$router.push('/destinatio')"
        round
        color="brown"
        style="width: 120px; margin: 0px 0px 20px 20px">显示所有</van-button>
      <van-swipe>
        <van-swipe-item>
          <img :src="`http://localhost:3010/images/${Scenerys[9].scenery_img}`" alt="">
          <!-- <img :src="Scenerys.length===0?'加载中'：`http://localhost:3010/images/${Scenerys[9].scenery_img}`" alt=""> -->
          <h3>{{Scenerys[9].scenery_title}}</h3>
        </van-swipe-item>
        <van-swipe-item>
          <img :src="`http://localhost:3010/images/${Scenerys[21].scenery_img}`" alt="">
          <h3>{{Scenerys[21].scenery_title}}</h3>
        </van-swipe-item>
        <van-swipe-item>
          <img :src="`http://localhost:3010/images/${Scenerys[15].scenery_img}`" alt="">
          <h3>{{Scenerys[15].scenery_title}}</h3>
        </van-swipe-item>
        <van-swipe-item>
          <img :src="`http://localhost:3010/images/${Scenerys[28].scenery_img}`" alt="">
          <h3>{{Scenerys[28].scenery_title}}</h3>
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 建议路线 -->
    <div class="route">
      <h1>最佳的体验&旅游</h1>
      <van-button
        round
        color="brown"
        style="width: 120px; margin: 0px 0px 20px 20px">显示所有</van-button>

        <van-swipe :loop="false" :width="380">
          <van-swipe-item v-for="item in routeTypes" :key="item.id">
            <van-grid style="border:1px solid transparent;border-radius:10px;overflow: hidden; margin:0px 20px;">
              <van-image
                :src="require('@/assets/img/7ri.jpeg')"
                fit="contain"
              />
                <div style="width: 330px;line-height: 30px;padding: 20px;" >
                  <h3>{{item.type}}</h3>
                  <van-divider />
                  <van-cell title="了解详情" is-link title-style="color:brown;" @click="$router.push(`/detailed-route/${item.type_id}`)"/>
                </div>
          </van-grid>
          </van-swipe-item>
        </van-swipe>
    </div>

    <div v-show="isVisable">
      <van-button @click="$router.push('/route')" icon="guide-o" color="brown" round style="width:80%;height:60px;font-size: 16px;margin-left: 40px;position: fixed;bottom: 10px;">创建行程</van-button>
  </div>
		<AppFooter></AppFooter>

  </div>
</template>

<script>
import AppHeader from '@/components/AppHeader.vue';
import AppFooter from '@/components/AppFooter.vue';
import httpApi from '@/http';

export default {
	 components: { AppHeader,AppFooter },
  data() {
    return {
			show: false,
      isVisable:false,
      Scenerys:[],//保存目的地
      routeTypes:[],//保存类型
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    handleScroll() {
    let top = Math.floor (document.documentElement.scrollTop || document.body.scrollTop)
    if(top>=300 && top<=835){
      this.isVisable=true
    }
    if(top>835 || top<300){
      this.isVisable=false
    }
    // console.log(top);
    },

    // 显示所有路线
    routeList(){
      httpApi.RouteApi.queryAllRoute().then(res=>{
        // console.log(res);
      })
    }
  },
  mounted(){
    this.routeList();
      //加载目的地
    httpApi.RouteApi.queryAllRouteScenery().then(res=>{
        // console.log(res);
        this.Scenerys=res.data.data
      })
    //记载路线类型
    httpApi.RouteApi.queryAllRouteTypes().then(res=>{
        console.log(res);
        this.routeTypes=res.data.data  
      })
    window.addEventListener("scroll",this.handleScroll);
   },
}
</script>

<style lang="scss" scoped>
.head{
	position: relative;
	h1{
		position: absolute;
		top: 200px; 
    left: 20px;
    color: white;
	}
}
.travelPlan{
	padding:20px;
	margin-bottom: 20px;
	h3{
		font-size:32px;
		margin-bottom: 30px;
	}
}

.destination{
	margin-bottom: 20px;
  background-color:#eee;
  img{
    padding:0 10px;
    width: 350px;
    height: 200px;
    border-radius: 5px;
  }
	h1{
		padding:40px 0px 0px 20px
	}

    h3{
      line-height: 40px;
      text-align: center;
      margin-bottom: 20px;
    }
  
}

.route{
	h1{
		padding:40px 0px 0px 20px
	}
}

</style>

<style>
.van-grid-item__content{
  padding: 0px;
}
</style>